<script setup>
import {onMounted, ref} from 'vue';
import { selectAllAttractions, selectAttractionsByCityId } from '@/api/yy/AttractionsHome.js';
import router from "@/router/index.js";

const didian=ref(['烟台','青岛','威海','蓬莱','莱阳',])
// 调用方法展示城市
const showCity = async () => {
  const trs = await selectAllAttractions();
  didian.value = trs.data.data;
}

const mdd = ref([
  {
    img:'https://pic5.40017.cn/i/ori/1gtuJKrlgxW_240x135_00.png',
    name:'龙口南山旅游景区',
    title:'福寿南山，祈福圣地',
    price:'99',
  },
  {
    img:'https://pic5.40017.cn/i/ori/1gtuJKrlgxW_240x135_00.png',
    name:'龙口南山旅游景区',
    title:'福寿南山，祈福圣地',
    price:'99',
  },
  {
    img:'https://pic5.40017.cn/i/ori/1gtuJKrlgxW_240x135_00.png',
    name:'龙口南山旅游景区',
    title:'福寿南山，祈福圣地',
    price:'99',
  },
  {
    img:'https://pic5.40017.cn/i/ori/1gtuJKrlgxW_240x135_00.png',
    name:'龙口南山旅游景区',
    title:'福寿南山，祈福圣地',
    price:'99',
  },
  {
    img:'https://pic5.40017.cn/i/ori/1gtuJKrlgxW_240x135_00.png',
    name:'龙口南山旅游景区',
    title:'福寿南山，祈福圣地',
    price:'99',
  },
  {
    img:'https://pic5.40017.cn/i/ori/1gtuJKrlgxW_240x135_00.png',
    name:'龙口南山旅游景区',
    title:'福寿南山，祈福圣地',
    price:'99',
  },
  {
    img:'https://pic5.40017.cn/i/ori/1gtuJKrlgxW_240x135_00.png',
    name:'龙口南山旅游景区',
    title:'福寿南山，祈福圣地',
    price:'99',
  },
  {
    img:'https://pic5.40017.cn/i/ori/1gtuJKrlgxW_240x135_00.png',
    name:'龙口南山旅游景区',
    title:'福寿南山，祈福圣地',
    price:'99',
  }
]);
//根据传入城市id展示景点
const showAttractions = async (cityId) => {
  const trs = await selectAttractionsByCityId(cityId);
  console.log(trs)
  mdd.value = trs.data.data;
}

onMounted(async () => {
  showCity()
  showAttractions(1)
})

const lyj=ref([
  {
    img: "https://pic5.40017.cn/i/ori/15tvsbWLH8s.png",
    name: "聊城市文化旅游局"
  },
  {
    img: "https://pic5.40017.cn/i/ori/1lqJIDblskg.png",
    name: "赤峰市文化旅游局"
  },
  {
    img: "https://pic5.40017.cn/04/002/e7/a8/rBTJU11bXluATdLRAAAa2KACdds249.png",
    name: "陕西省文化旅游局"
  },
  {
    img: "https://pic5.40017.cn/i/ori/1d5f76grYCQ.jpg",
    name: "福州市文化旅游局"
  },
  {
    img: "https://pic5.40017.cn/i/ori/15tvsbWLH8s.png",
    name: "烟台市文化旅游局"
  },
  {
    img: "https://pic5.40017.cn/i/ori/1gx4oZvNBf2.png",
    name: "宿迁市文化旅游局"
  }
])

const toAttraction = (id)=>{
  router.push({path:'/attractionsDetail',query:{id:id}})
}

//跳转到lnquireAttractions页
const toInquireAttractions = ()=>{
  router.push({path:'/lnquireAttractions'})
}
</script>

<template>
  <div class="common-layout" style="width: 1190px;margin:0 auto">
        <div class="demo-collapse">
<!--          左侧导航框-->
          <div class="menu-container" style="overflow: hidden">
            <div class="left-menu">
              <ul>
              <li class="menu-item">
                <span>
                  <span style="display:inline-block;width: 22px;height: 22px;overflow: hidden;margin-left: 0;padding-top: 0;position:absolute;left: 7px;top: 13px;" class="tu2">
                    <img src="https://img1.40017.cn/cn/s/2016/pc/scenery/index/new/littleIcons.png" alt="" style="position: absolute;top: -38px;left: -7px;">
                 </span>
                  当季必去</span>
                <div>
                  <ul class="left_list">
                    <li>海底世界</li>
                    <li>大珠山景区</li>
                    <li>青岛海昌</li>
                    <li>济南融创水世界</li>
                  </ul>
                </div>
                <div class="sub-menu">
                  <p style="font-weight: 400;font-size: 16px;display: block">精选推荐</p>
                  <div>
                    <ul style="display:inline-block;" class="right_list">
                      <li>海底世界</li>
                      <li>青岛海昌  </li>
                      <li>罗山国家森林公园</li>
                      <li>曲阜三孔</li>
                      <li>威海神游海洋世界</li>
                      <li>大珠山景区</li>
                      <li>泉城海洋极地</li>
                    </ul>
                  </div>
                </div>
              </li>
              <li class="menu-item">
                <span>TOP 热销
                  <span style="display:inline-block;width: 22px;height: 22px;overflow: hidden;margin-left: 0;padding-top: 0;position:absolute;left: 7px;top: 13px;" class="tu2">
                    <img src="https://img1.40017.cn/cn/s/2016/pc/scenery/index/new/littleIcons.png" alt="" style="position: absolute;top: -62px;left: -7px;">
                 </span>
                </span>
                <div>
                  <ul class="left_list">
                    <li>龙口南山景区</li>
                    <li>养马岛</li>
                    <li>罗山森林公园</li>
                    <li>侏罗纪公园</li>
                  </ul>
                </div>
                <div>

                  <div class="sub-menu">
                    <p style="font-weight: 400;font-size: 16px;display: block">销量头牌</p>
                    <div>
                      <ul class="right_list">
                        <li>龙口南山旅游</li>
                        <li>烟台蛇博园</li>
                        <li>东方航天港指控中心</li>
                        <li>三仙山风景区</li>
                        <li>栖霞太虚宫</li>
                        <li>东方航天港指控中心</li>
                      </ul>
                    </div>
                  </div>
                </div>

              </li>
              <li class="menu-item">
                <span>精品主题
                  <span style="display:inline-block;width: 22px;height: 22px;overflow: hidden;margin-left: 0;padding-top: 0;position:absolute;left: 7px;top: 13px;" class="tu2">
                    <img src="https://img1.40017.cn/cn/s/2016/pc/scenery/index/new/littleIcons.png" alt="" style="position: absolute;top: -138px;left: -7px;">
                 </span></span>
                <div>
                  <ul class="left_list">
                    <li>海底世界 大珠山景区</li>
                    <li>青岛海昌 济南融创水世界</li>

                  </ul>
                </div>

              </li>
              <li class="menu-item">
                <span>周边城市
                  <span style="display:inline-block;width: 22px;height: 22px;overflow: hidden;margin-left: 0;padding-top: 0;position:absolute;left: 7px;top: 13px;" class="tu2">
                    <img src="https://img1.40017.cn/cn/s/2016/pc/scenery/index/new/littleIcons.png" alt="" style="position: absolute;top: -114px;left: -7px;">
                 </span></span>
                <div>
                  <ul class="left_list">
                    <li>海底世界 大珠山景区</li>
                    <li>青岛海昌 济南融创水世界</li>
                  </ul>
                </div>

              </li>
            </ul>
          </div>
            <div>
              <img src="https://pic5.40017.cn/i/ori/1BqUL5o9ndC.jpg" alt="">
            </div>
        </div>
<!--          轮播图-->
          <el-carousel :interval="5000" arrow="always" class="lbt">
            <el-carousel-item v-for="item in 4" :key="item">
              <img src="../../../assets/yy/attractions/lb1.jpg" alt="轮播图1" width="100%" height="100%">
            </el-carousel-item>
          </el-carousel>
        </div>
<!--        广告-->
        <div class="gg" style="margin: 10px 0px 10px 0px">
          <img src="../../../assets/yy/attractions/guanggao.jpg" alt="广告1" width="100%" height="100%">
        </div>
<!--        跳转图-->
        <div class="tzt">
          <ul style="display: flex; justify-content: center">
            <li><img src="../../../assets/yy/attractions/tz1.jpg" alt=""></li>
            <li><img src="../../../assets/yy/attractions/tz2.jpg" alt=""></li>
            <li><img src="../../../assets/yy/attractions/tz3.png" alt=""></li>
            <li><img src="../../../assets/yy/attractions/tz4.png" alt=""></li>
            <li @click="toInquireAttractions"><img src="../../../assets/yy/attractions/tz5.jpg" alt=""></li>
          </ul>
        </div>
<!--        热门景点-->
        <div class="rmjd">
          <div class="right">
            <div class="right-1">
              <img src="../../../assets/yy/attractions/mdd.png" alt="">
            </div>
            <div class="right-2">
              <ul>
                <li></li>
              </ul>
            </div>
          </div>
          <div class="left">
            <div class="left-1">
              <ul class="left-1-shang">
                <li v-for="item in didian" :key="item">
                  <span @mouseover="showAttractions(item.id)">{{item.name}}</span>
                </li>
              </ul>
            </div>
            <div class="left-2">
              <ul class="left-2-xia">
                <li v-for="item in mdd" :key="item" @click="toAttraction(item.id)">
                  <div class="left-2-jj" @mouseenter="showDetails=true" @mouseleave="showDetails=false">
                    <img :src=item.image alt="">
                    <div class="left-2-jj-lashen">
                      <span style="font-size: 18px;margin-left: 5px">{{ item.name }}</span>
                      <div style="font-size: 12px;margin-left: 5px">{{item.title}}</div>
                    </div>
                    <div style="margin: 5px">
                      <span style="color: red">￥</span>
                      <span style="color: red;font-size: 22px">{{ item.price }}</span>
                      <span style="color: #999999">起</span>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
<!--        旅游局合作-->
        <div class="lyj">
          <div class="lyj-shang">
            <span>旅游局合作</span>
          </div>
          <div class="lyj-xia" style="padding-top: 10px">
            <ul style="display: flex;justify-content: space-around">
              <li v-for="item in lyj" :key="item">
                <div class="lyj-xia-img">
                  <img :src=item.img alt="">
                  <div>
                    <span>{{item.name}}</span>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
  </div>
</template>

<style scoped lang="less">










.left_list li{
  display: inline-block;
  margin-right: 5px;
  font-weight: 100;
  color: #dedfe0 ;
}
.left_list{
  margin-left: 20px;
}
.right_list li{
  display: inline-block;
  margin-right:20px;
}
.menu-item{
  background-color: #475763;
  width: 218px;
  height: 87px;
}
.menu-item>span{
  color: white;
}


.menu-item:hover {
  background-color: white;
}
.menu-item:hover span{
  color: black;
}
.menu-item:hover li{
  color: #666;
}
.sub-menu{
  width: 218px;
  height: 187px;
  z-index: 9999;
  border-radius: 3px;

}
.sub-menu > li{
  font-size: 14px;
  margin-left: 10px;

}





/*原*/
.common-layout{
  background-color: #f3f3f3;
}
.menu-container {
  width: 1190px;
  height: 348px;
  background-image: url("https://pic5.40017.cn/i/ori/1sF19AIeyc0.jpg");
  background-size: 1190px 390px; /* 宽度 200px，高度 150px */
}
.main-menu {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
.menu-item {
  position: relative;
  width: 200px;
}
.menu-item a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: #333;
  background-color: #f4f4f4;
}
.sub-menu {
  width: 200px;
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
  list-style-type: none;
  padding: 0;
  margin: 0;
  background-color: white;
}
.menu-item:hover .sub-menu,
.active-sub-menu .sub-menu {
  display: block;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.menu-container {
  display: flex;
  margin-bottom: 20px;
}

.left-menu {
  list-style-type: none;
}

.menu-item {
  position: relative;
}

.menu-item span {
  padding-top: 10px;
  display: block;
  cursor: pointer;
  font-size: 17px;
  font-weight: 400;
  margin-left: 30px;
}
.menu-item div{
  padding: 0 0 0 10px;
  font-size: 16px;
}
.menu-item div ul li{
  font:normal normal normal 14px Arial, sans-serif;
}
.menu-item div ul li:hover{
  color: #FF7829;
}
.sub-menu {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
  list-style-type: none;
  background-color: white;

  /*border: 1px solid #ccc;*/

}

.menu-item:hover.sub-menu {
  display: block;
}

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.tou{
  .demo-collapse{
    display: flex;
  }
}
.lbt{
  width: 100%;
  margin-right: 120px;
}
.tzt ul li img{
  height: 100px;
}
.rmjd{
  width: 100%;
  height: 500px;
  margin-top: 30px;
  display: flex;
}
.right{
  width: 210px;
  height: 500px;
}
.right-1{
  width: 210px;
  height: 50px;
}
.right-2{
  width: 210px;
  height: 435px;
  background-image: url("../../../assets/yy/attractions/bjt.gif");
}
.left{
  width: 1000px;
}
.left-1{
  width:400px;
  height:50px;
  display: flex;
  align-content: center;
  justify-content: space-between;
}
.left-1-shang{
  width: 100%;
  height: 100%;
  display: flex;
  align-content: center;
  justify-content: space-around;
}
.left-1-shang li span{
  width: 100%;
  height: 100%;
  display: flex;
  align-content: center;
  justify-content: center;
  margin-top: 15px;
}
.left-1-shang li{
  width: 100%;
  height: 100%;
}
.left-2{
  width: 100%;
  height: 450px;
}
.left-2-xia{
  width:100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
}
.left-2-xia li{
  width: 230px;
  height: 200px;
  margin-right: 15px;
}
.left-2-jj{
  width:230px;
  height: 140px;
}
.left-2-jj img{
  width: 230px;
  height: 135px;
  margin: 5px;
}
/*.left-2-jj-lashen{
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-out;
}
.left-2-jj.hover .left-2-jj-lashen div{
  max-height: 18px;
}*/

.lyj{
  width: 100%;
  height: 200px;
  margin-top: 30px
}
.lyj-shang{
  width:100%;
  height: 50px;
  background-color: #F3F3F3;
}
.lyj-shang span{
  font-size: 24px;
}
.lyj-xia{
  width:100%;
  height: 130px;
  background-color: white;
}
.lyj-xia ul{
  width: 100%;
  height: 100%;
  display: flex;
}
.lyj-xia ul li{
  width:180px;
  height: 100px;
}
.lyj-xia-img{
  text-align: center;
}


.lyj-xia-img div{
  width: 180px;
  height: 40px;
  display: flex;
  align-content: center;
  justify-content: center;
}
</style>